<template>
	<view class="container">
		<Header
			:isHomepage="true"
			:bannerList="bannerList"
		></Header>
		<!-- <button @click="handleWeChatLogin">一键登录</button> -->
		<!-- 搜索栏 -->
		<view class="search">
			<view class="search-input">
				<view class="search-input-left">
					<image src="" mode=""></image>
					<input type="text" v-model="textWord"/>
				</view>
				<view class="search-input-right">
					<button @click="goToSearchPage">查找纪念馆</button>
				</view>
			</view>
			<view class="search-other">
				<text>找不到纪念馆？</text>
				<text @click="goToMemorialPage">我要创建纪念馆</text>
			</view>
		</view>
		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 最新追思 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">最新追思</text>
					<text class="more" @click="goToMuList">更多</text>
				</view>
				<view class="memorial-grid">
					<view class="memorial-item" v-for="(item, index) in newGraveyardList" :key="index"  @click="goDetail(item.id)">
						<image class="memorial-image" :src="item.avatar" mode="aspectFill"></image>
						<text class="memorial-name">{{item.name}}</text>
					</view>
				</view>
			</view>

			<!-- 今生永恒网资讯 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">天堂资讯</text>
					<text class="more" @click="goToArticleList(3,'天堂资讯')">更多</text>
				</view>
				<view class="news-list">
					<view class="news-item" v-for="(item, index) in newList" :key="index" @click="goToArticleDetail(3, item.id, '天堂资讯')">
						<text class="news-title">{{item.title}}</text>
					</view>
				</view>
			</view>

			<!-- 帮助中心 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">民俗文化</text>
					<text class="more" @click="goToArticleList(1,'民俗文化')">更多</text>
				</view>
				<view class="help-list">
					<view class="help-item" v-for="(item, index) in cultureList" :key="index" @click="goToArticleDetail(1, item.id, '民俗文化')">
						<text class="help-title">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="section">
				<view class="section-header">
					<text class="section-title">生命文化</text>
					<text class="more" @click="goToArticleList(2,'生命文化')">更多</text>
				</view>
				<view class="help-list">
					<view class="help-item" v-for="(item, index) in lifeList" :key="index" @click="goToArticleDetail(2, item.id, '生命文化')">
						<text class="help-title">{{item.title}}</text>
					</view>
				</view>
			</view>
			
		</view>

		<!-- 底部导航 -->
		<view class="footer">
			<view class="footer-nav">
				<text class="nav-item">网上纪念馆</text>
				<text class="nav-item">天堂资讯</text>
				<text class="nav-item">帮助中心</text>
			</view>
			<view class="copyright">
				<text>版权所有©今生永恒网 www.cqjsyh.com</text>
			</view>
		</view>

		
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Header from '@/components/header/index.vue'
import { apiHomeData } from '@/api/home.js'


const router = useRouter();

// 搜索
const textWord = ref('')


// 自定义头部
// const isLoggedIn = ref(true)
// const userInfo = ref({})

// 
const showLogin = ref(false);
const loginTab = ref(0);
const loginForm = ref({
  username: '',
  password: '', 
  phone: '',
  sms: ''
});


const goToRegister = () => {
  uni.navigateTo({
    url: '/pages/register/index'
  })
}

const goToSearchPage = () => {
	uni.navigateTo({
		url: '/pages/searchPage/index?text=' + textWord.value
	})
}

const goToMemorialPage = () => {
	uni.navigateTo({
		url: '/pages/createMemorial/index'
	})
}

const goDetail = (id: number | string) => {
	console.log('2222222222222', uni.getStorageSync('userInfo'))
	uni.navigateTo({
		url: '/pages/individualSpace/index?id=' + id
	})
}

// 首页数据
const bannerList= ref([])
const newGraveyardList = ref([])
const cultureList = ref([])
const lifeList = ref([])
const newList = ref([])

const getHomeData = async () => {
    await apiHomeData().then(res=>{
		console.log(res)
		if(res.code == 1){
			bannerList.value = res.data.bannerList
			newGraveyardList.value = res.data.muList
			cultureList.value = res.data.cultureList
			lifeList.value = res.data.lifeList
			newList.value = res.data.newList
		}
	}).catch(error=>{
		console.log(error)
	})
    
}

const goToArticleDetail = (type: number, id: number | string, title: string) => {
	uni.navigateTo({
		url: '/pages/article/detail?id=' + id + '&pageTitle=' + title
	})
}

// 去文章列表
const goToArticleList = (type: number, title: string) => {
	uni.navigateTo({
		url: '/pages/article/index?pid=' + type + '&title=' + title
	})
}

// 去墓地列表
const goToMuList = () => {
	uni.navigateTo({
		url: '/pages/searchPage/index'
	})
}

onMounted(() => {
    getHomeData()
})

onLoad((options)=>{
	
})
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	max-width: 750rpx;
	margin: 0 auto;
}



.site-name {
	font-size: 32rpx;
	color: #333;
}

.header-right {
	display: flex;
	gap: 20rpx;
}

.login-btn, .register-btn {
	font-size: 28rpx;
	color: #666;
}



.section {
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.more {
	font-size: 20rpx;
	color: #999;
}

/* 最新追思网格布局 */
.memorial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.memorial-grid .memorial-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.memorial-grid .memorial-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

.memorial-grid .memorial-name {
	font-size: 24rpx;
	color: #666;
	text-align: center;
	width: 200rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.memorial-list, .news-list, .help-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.memorial-item, .news-item, .help-item {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.memorial-name, .news-title, .help-title {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.footer {
	background-color: #fff;
	padding: 30rpx;
	margin-top: 40rpx;
}

.footer-nav {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
}

.nav-item {
	font-size: 28rpx;
	color: #666;
}

.copyright {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-top: 20rpx;
}

.modal-mask {
	position: fixed;
	z-index: 1000;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-modal {
	width: 400rpx;
	max-width: 90vw;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.18);
	padding: 0 0 24rpx 0;
	position: relative;
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx;
	height: 56rpx;
	border-bottom: 1rpx solid #f5e3c2;
	background: #fdf6e3;
	border-radius: 12rpx 12rpx 0 0;
}
.modal-tabs {
	display: flex;
	align-items: center;
}
.modal-tab {
	font-size: 18rpx;
	color: #b98c4b;
	padding: 0 16rpx;
	line-height: 56rpx;
	cursor: pointer;
}
.modal-tab.active {
	color: #e69c23;
	font-weight: bold;
	border-bottom: 2rpx solid #e69c23;
}
.modal-close {
	font-size: 28rpx;
	color: #b98c4b;
	cursor: pointer;
	margin-left: 12rpx;
}
.modal-body {
	padding: 24rpx 32rpx 0 32rpx;
	display: flex;
	flex-direction: column;
}
.modal-input {
	width: 100%;
	height: 40rpx;
	margin-bottom: 16rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 4rpx;
	padding: 0 12rpx;
	font-size: 16rpx;
	background: #fafafa;
}
.modal-btn-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 8rpx;
	gap: 12rpx;
}
.modal-btn {
	min-width: 90rpx;
	height: 36rpx;
	border-radius: 4rpx;
	border: none;
	font-size: 16rpx;
	background: #f5f5f5;
	color: #666;
	margin-right: 8rpx;
}
.modal-btn.primary {
	background: #ffb43a;
	color: #fff;
}
.modal-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12rpx;
	padding: 0 2rpx;
}
.modal-link {
	font-size: 14rpx;
	color: #b98c4b;
	cursor: pointer;
}
.modal-link.right {
	float: right;
}

.search{
	width: 96%;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.search .search-input{
	width: 100%;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: #B3B3B3 1px solid;
	border-radius: 5rpx 0 0 5rpx;
}
.search-input-left{
	width: calc(100% - 110rpx);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	
}
.search-input-left image{
	width: 60rpx;
	height: 60rpx;
}
.search-input-right button{
	width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0;
	margin: 0;
	border: none;
	background: #B3B3B3;
	-webkit-appearance: none;
	text-align: center;
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	-moz-border-radius: 0rpx;
	-webkit-border-radius: 0rpx;
	border-radius: 0rpx;
}
.search .search-other{
	width: 100%;
	margin-top: 5rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999;
}
.search .search-other text{
	cursor: pointer;
}
</style>